<template>
	<div>
		<div style="margin-bottom: 20px;">
			<el-button type="primary" size="medium" plain @click="back">返回</el-button>
		</div>
		<div class="addMaterial" v-if="isAddShow">
			<el-form :model="materialForm" inline :rules="rules" ref="ruleForm" label-position="left">
				<el-form-item label="标题" prop="title">
					<el-input type="text" style="width: 300px;" v-model="materialForm.title"
						placeholder="输入标题"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-select v-model="materialForm.type" placeholder="请选择类型">
						<el-option v-for="item in materiaType" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传视频" prop="videoUrl">
					<el-upload class="avatar-uploader el-upload--text" :action="uploadVideo" :show-file-list="false"
						:on-success="handleVideoSuccess" :before-upload="beforeUploadVideo"
						:on-progress="uploadVideoProcess">
						<el-button :disabled="videoFlag" size="small" :type="buttonType">
							{{buttonValue}}
						</el-button>
					</el-upload>
					<el-progress v-if="videoFlag" :percentage="Number(videoUploadPercent)"
						style="width: 200px;"></el-progress>
				</el-form-item>
			</el-form>
			<div>内容</div>
			<div style="margin-top: 10px;height: 450px;">
				<RichTextEditor style="height: 400px;" @update-content="updateContent" :src="IMG_URL" ref="RichTextEditor">
				</RichTextEditor>
			</div>
			<div>
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</div>
		</div>
		<!-- 详情 -->
		<div class="detail" v-if="!isAddShow" style="width: 71%;">
			<div style="font-size: 20px;font-weight: bold;">{{material.title}}</div>
			<div style="margin: 10px 0;display: flex; color: #9499a9;">
				<!-- 浏览次数 -->
				<div>
					<i class="el-icon-view"></i>
					<span style="margin-left: 5px;">{{material.viewCount}}次</span>
				</div>
				<!-- 发布时间 -->
				<div style="margin-left: 10px;">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px;">{{material.createTime}}</span>
				</div>
				<!-- 发布人 -->
				<div style="margin-left: 10px;">
					<i class="el-icon-user"></i>
					<span style="margin-left: 5px;">{{material.userName}}</span>
				</div>
			</div>
			<!-- 视频 -->
			<video v-if="material.videoUrl !== '' && material.videoUrl !==null" height="450px"
				:src="videoUrl+material.videoUrl" controls style="margin: 10px 0;"></video>
			<!-- 内容 -->
			<div class="content" style="margin: 20px 0;" v-html="material.content"></div>
			<!-- 评论 -->
			<div>
				<div style="font-size: 18px;font-weight: bold;margin: 10px 0;">评论</div>
				<div v-if="comment.length > 0" v-infinite-scroll="load" :infinite-scroll-distance="50" :infinite-scroll-delay="300">
					<div style="display: flex; margin-bottom: 10px;" v-for="(item,index) in comment" :key="index">
						<!-- 头像 -->
						<div style="width: 50px;">
							<el-avatar size="medium" :src="imageUrl+item.image"></el-avatar>
						</div>
						<div style="flex: 1;">
							<div
								style="width: 100%;margin: 5px 0 10px 0; display: flex;justify-content: space-between;">
								<span>{{item.userName}}</span>
								<div style="color: #9499a9;">
									<i class="el-icon-time"></i>
									<span style="margin-left: 5px;">{{item.createTime}}</span>
								</div>
							</div>
							<div style="padding: 10px 0;" v-html="item.content"></div>
							<div style="width: 100%;height: 10px; border-bottom: 1px #e3e5e7 solid;"></div>
						</div>
					</div>
				</div>
				<div v-else>
					<span>暂无评论</span>
				</div>
				<div style="width: 100%; display: flex; justify-content: center; color: #9499a9;">
					<span>——已经到底啦——</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import apiURL from "../../../api/apiURL.js"
	import api from "../../../api/companyCulture.js"
	import RichTextEditor from "../../../components/RichTextEditor.vue"
	export default {
		components: {
			RichTextEditor
		},
		data() {
			return {
				noData: true,
				isAddShow: true,
				materialForm: {
					title: '', //标题
					type: 0, //类型
					content: '', // 内容
					imageUrl: '', // 图片地址
					videoUrl: '', // 视频地址
				},
				// 类型
				materiaType: [{
						label: '学习资料',
						value: 0
					},
					{
						label: '培训视频',
						value: 1
					},
					{
						label: '会议视频',
						value: 2
					},
					{
						label: '公司介绍',
						value: 3
					},
					{
						label: '管理制度',
						value: 4
					}
				],
				buttonValue: '点击上传',
				buttonType: 'primary',
				uploadSuccess: false,
				videoUploadPercent: 0,
				videoFlag: false,
				IMG_URL: apiURL.IMG_URL, //图片上传地址
				uploadVideo: apiURL.VIDEO_URL, // 视频上传地址
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}]
				},
				material: {},
				videoUrl: apiURL.READ_VIDEO_URL,
				imageUrl: apiURL.READ_IMG_URL,
				comment: [],
				// 分页大小
				pageSize: 10,
				//记录当前页数
				currentPage: 1,
			};
		},
		created() {
			let data = localStorage.getItem("material")
			if (data) {
				this.isAddShow = false
				this.material = JSON.parse(data)
				this.getComment(this.material.id)
			}
		},
		methods: {
			// 返回
			back() {
				localStorage.removeItem("material")
				this.$router.go(-1)
			},
			// 富文本传值
			updateContent(data) {
				this.materialForm.content = data.content
				this.materialForm.imageUrl = data.imageList
				//console.log("data===>", data)
			},
			// 提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('确定要提交吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							//console.log("提交表单=>",this.materialForm)
							api.addMaterial(this.materialForm).then(res => {
								if (res.code === 200) {
									this.$message.success("提交成功！")
									this.resetForm()
								} else {
									this.$message.error("提交失败！")
								}
							})
						})
					} else {
						return false;
					}
				});
			},
			resetForm() {
				this.materialForm.title = '';
				this.materialForm.type = 0;
				//this.materialForm.content = '';
				this.$refs.RichTextEditor.clear()
				this.materialForm.imageUrl = '';
				this.materialForm.videoUrl = '';
				this.buttonValue = '点击上传';
				this.buttonType = 'primary';
			},
			// 上传视频验证
			beforeUploadVideo(file) {
				const isLt10M = file.size / 1024 / 1024 < 500;
				if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -
					1) {
					this.$message.error('请上传正确的视频格式');
					return false;
				}
				if (!isLt10M) {
					this.$message.error('上传视频大小不能超过500MB哦!');
					return false;
				}

			},
			// 上传进度
			uploadVideoProcess(event, file) {
				this.videoFlag = true;
				this.videoUploadPercent = file.percentage.toFixed(0);
			},
			// 上传视频成功
			handleVideoSuccess(res) {
				this.buttonValue = '重新上传';
				this.videoFlag = false;
				this.videoUploadPercent = 0;
				console.log("videoUrl===>", res.data)
				if (res.code == 200) {
					this.$message.success('视频上传成功！');
					this.buttonType = 'success'
					this.materialForm.videoUrl = res.data;
				} else {
					this.$message.error('视频上传失败，请重新上传！');
					this.buttonType = 'danger'
				}
			},
			// 获取资料
			// getMaterial(id){
			// 	console.log("id==>",id)
			// 	const data = {
			// 		id: id
			// 	}
			// 	api.getMaterial(data).then(res =>{
			// 		if (res.code === 200){
			// 			console.log("data===>",res.data)
			// 			this.material = res.data
			// 		}
			// 	})
			// 	console.log(this.material)
			// },
			// 获取评论
			getComment(id) {
				let data = {
					materialId: id,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}
				api.getComment(data).then(res => {
					if (res.code === 200) {
						if (res.data.length === 0){
							this.noData = false
							return
						}
						res.data.forEach(item =>{
							this.comment.push(item)
						})
					}
				})
			},
			// 到底部刷新
			load(){
				if (this.noData){
					this.currentPage += 1
					this.getComment(this.material.id);
				}
			}
		}
	}
</script>

<style>
	.content img {
		width: 100%;
		height: 100%;
		margin: 1em 0 !important;
	}
</style>